<template>
    <el-dialog
        title="规格选择"
        v-model="dialogVisible"
        width="80%"
        top="5vh">
        
        <el-container style="height:65vh;">
            <el-aside width="220px" class="image-aside">
                <div class="top">
                    
                    <div class="sku-list" :class="{ 'active':(activeId == item.id) }" v-for="(item,index) in tableData" :key="index" @click="handleChangeActiveId(item.id)">
                        {{ item.name }}
                    </div>

                </div>
                <div class="bottom">
                    <el-pagination 
                    background 
                    layout="prev, next" 
                    :total="total" 
                    :current-page="currentPage" 
                    :page-size="limit" 
                    @current-change="getData"/>
                </div>
            </el-aside>
            <el-main>
                <el-checkbox-group v-model="form.list">
                    <el-checkbox v-for="item in list" :key="item" :label="item" border>
                        {{item}}
                    </el-checkbox>
                </el-checkbox-group>
            </el-main>
        </el-container>

        <template #footer>
            <span>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue"
import {
    getSkusList
} from "~/api/skus"
import {
    useInitTable
} from "~/composables/useCommon"

const dialogVisible = ref(false)
const activeId = ref(0)
const {
    loading,
    currentPage,
    limit,
    total,
    tableData,
    getData
} = useInitTable({
    getList:getSkusList,
    onGetListSuccess:(res)=>{
        tableData.value = res.list
        total.value = res.totalCount

        if(tableData.value.length > 0){
            handleChangeActiveId(tableData.value[0].id)
        }
    }
})

const callbackFunction = ref(null)
const open = (callback = null)=>{
    callbackFunction.value = callback
    getData(1)
    dialogVisible.value = true
}

const list = ref([])

const form = reactive({
    name:"",
    list:[]
})

function handleChangeActiveId(id){
    activeId.value = id
    list.value = []
    let item = tableData.value.find(o=>o.id == id)
    if(item){
        list.value = item.default.split(",")
        form.name = item.name
    }
}

const submit = ()=>{
    if(typeof callbackFunction.value === "function"){
        callbackFunction.value(form)
    }
    dialogVisible.value = false
}

defineExpose({
    open
})
</script>
<style>
.image-aside{
  border-right: 1px solid #eeeeee;
  position: relative;
}
.image-aside .top
{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-aside .bottom
{
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}
.sku-list {
    border-bottom: 1px solid #f4f4f4;
    @apply p-3 text-sm text-gray-600 flex items-center cursor-pointer;
}
.sku-list:hover,active {
    @apply bg-blue-50;
}
</style>